<!-- 订单详情 -->
<!-- 运单详情 -->
<template>
  <div class="dashboard-container waybill-detail">
    <div class="app-container">
      <el-card
        shadow="never"
        class="order-box"
      >
        <el-row
          :gutter="20"
          justify="center"
        >
          <el-col :span="6">
            <div class="ddbh">
              订单编号：
              <label>{{ manageDetailShowList.id }}</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="ydbh">
              运单编号：
              <label>{{ manageDetailShowList.memberId }}</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="xdsj">
              下单时间：
              <label>{{ manageDetailShowList.createTime }}</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="ddzt">
              订单状态：
              <label
                v-if="manageDetailShowList.status == ' 23000'"
              >待取件</label>
              <label
                v-else-if="manageDetailShowList.status == '23001'"
              >已取件</label>
              <label
                v-else-if="manageDetailShowList.status == '23003'"
              >网点入库</label>
              <label
                v-else-if="manageDetailShowList.status == '23004'"
              >待装车</label>
              <label
                v-else-if="manageDetailShowList.status == '23005'"
              >运输中</label>
              <label
                v-else-if="manageDetailShowList.status == '23006'"
              >网点出库</label>
              <label
                v-else-if="manageDetailShowList.status == '23007'"
              >待派送</label>
              <label
                v-else-if="manageDetailShowList.status == '23008'"
              >派送中</label>
              <label
                v-else-if="manageDetailShowList.status == '23009'"
              >已签收</label>
              <label
                v-else-if="manageDetailShowList.status == '23010'"
              >拒收</label>
              <label v-else>已取消</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="yjddrq">
              预计到达日期：
              <label>{{ manageDetailShowList.estimatedArrivalTime }}</label>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-collapse
        v-model="activeNames"
        style="margin-top: 20px; border: none"
      >
        <el-collapse-item name="1">
          <template slot="title">
            <div class="collapse-detail">基本信息</div>
          </template>
          <div class="block">
            <el-timeline>
              <div class="line"></div>
              <div
                class="pake-info"
                style="margin-top: 10px"
              >
                <img
                  class="img-info1"
                  src="../../assets/fahuo.png"
                  alt=""
                />
                <span>发货方</span>
              </div>
              <div style="margin-top: 0px; margin-left: 40px; display: flex">
                <div style="">
                  <div class="demo-input-suffix base-info">
                    发货方姓名：
                    <span>{{ manageDetailShowList.senderName }}</span>
                  </div>

                  <div
                    class="demo-input-suffix base-info"
                  >
                    发货方地址：
                    <span>{{
                      manageDetailShowList.senderProvince.name +
                        manageDetailShowList.senderCity.name +
                        manageDetailShowList.senderCounty.name
                    }}</span>
                  </div>
                </div>
                <div style="margin-left: 174px">
                  <div
                    class="demo-input-suffix base-info"
                  >
                    发货方电话：

                    <span>{{ manageDetailShowList.senderPhone }}</span>
                  </div>
                  <div
                    class="demo-input-suffix base-info"
                    style="margin-left:-10px"
                  >
                    &nbsp;&nbsp;&nbsp;详细地址：

                    <span>{{ manageDetailShowList.senderAddress }}</span>
                  </div>
                </div>
              </div>
              <div
                class="pake-info"
                style="margin-top: 20px"
              >
                <img
                  class="img-info2"
                  src="../../assets/shouhuo.png"
                  alt=""
                />
                <span
                  style="display: inline-block; margin-top: 6px"
                >收货方</span>
              </div>
              <div style="margin-top: 0px; margin-left: 40px; display: flex">
                <div style="">
                  <div class="demo-input-suffix base-info">
                    收货方姓名：
                    <span>{{ manageDetailShowList.receiverName }}</span>
                  </div>

                  <div class="demo-input-suffix base-info">
                    收货方地址：
                    <span>{{
                      manageDetailShowList.receiverProvince.name +
                        manageDetailShowList.receiverCity.name +
                        manageDetailShowList.receiverCounty.name
                    }}</span>
                  </div>
                </div>
                <div style="margin-left: 174px">
                  <div class="demo-input-suffix base-info">
                    收货方电话：
                    <span>{{ manageDetailShowList.receiverPhone }}</span>
                  </div>
                  <div
                    class="demo-input-suffix base-info"
                    style="margin-left:-10px"
                  >
                    &nbsp;&nbsp;&nbsp;详细地址：
                    <span>{{ manageDetailShowList.receiverAddress }}</span>
                  </div>
                </div>

              </div>
              <div
                class="pake-info"
                style="margin-top: 20px"
              >
                <img
                  class="img-info2"
                  src="../../assets/juli.png"
                  alt=""
                />
                <span
                  style="display: inline-block; margin-top: 6px"
                >距离</span><span>
                  0.011068km</span><br>
                <div style="margin-top: 25px">
                  <span style="margin-left: 35px">备注:</span>  <span>暂无</span>
                </div>
              </div>

            </el-timeline>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-collapse
        v-model="activeNames"
        class="transport-box"
        style="margin-top: 20px"
      >
        <el-collapse-item
          name="6"
        >
          <template slot="title">
            <div class="collapse-detail">取件信息</div>
          </template>
          <el-scrollbar
            scroll-x
            class="order-scroll"
          >
            <el-row
              :gutter="30"
            >
              <el-col
                :span="6"
              >
                <div class="ddbh">
                  所在网点：
                  <label>{{ manageDetailShowList.taskPickup.courier.agency.name }}</label>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="ydbh">
                  取件类型：
                  <label
                    v-if="manageDetailShowList.pickupType == '1'"
                  >网点自寄</label>
                  <label
                    v-else-if="manageDetailShowList.pickupType == '2'"
                  >上门取件</label>

                </div>
              </el-col>
              <!-- ******************************************************************************* -->
              <el-col :span="6">
                <div class="xdsj">
                  作业状态：
                  <label
                    v-if="manageDetailShowList.taskPickup.status === '1'"
                  >新任务</label>
                  <label
                    v-else-if="manageDetailShowList.paymentStatusaaa === '2'"
                  >已完成</label>
                  <label
                    v-else-if="manageDetailShowList.paymentStatusaaa === '3'"
                  >已取消</label>

                </div>
              </el-col>
              <!-- ********************************************************************************* -->
              <el-col :span="6">
                <div class="xdsj">
                  快递员姓名
                  <label>{{ manageDetailShowList.taskPickup.courier.name }}</label>
                </div>
              </el-col>
            </el-row>

            <el-row
              :gutter="30"
            >
              <el-col
                :span="8"
                style="margin: 20px 0"
              >
                <div class="xdsj">
                  取件快递员电话:
                  <label>{{ manageDetailShowList.taskPickup.courier.mobile }}</label>
                </div>
              </el-col>
              <el-col
                :span="8"
              >
                <div
                  class="xdsj"
                  style="margin: 20px 0px 0px -100px"
                >
                  预计取件时间:
                  <label>{{ manageDetailShowList.estimatedStartTime }}</label>
                </div>
              </el-col>
              <el-col
                :span="8"
              >
                <div
                  class="xdsj"
                  style="margin: 20px 0px 0px -200px"
                >
                  取件完成时间:
                  <label>{{ manageDetailShowList.estimatedArrivalTime }}</label>
                </div>
              </el-col>
            </el-row>

          </el-scrollbar>
        </el-collapse-item>
      </el-collapse>
      <!-- 费用信息 -->
      <el-collapse
        v-model="activeNames"
        class="transport-box"
        style="margin-top: 20px"
      >
        <el-collapse-item name="6">
          <template slot="title">
            <div class="collapse-detail">费用信息</div>
          </template>
          <el-scrollbar
            scroll-x
            class="order-scroll"
          >
            <el-col
              :span="6"
              style="padding-bottom:30px;"
            >
              <div
                class="ddbh"
              >
                运费:
                <label><span
                  class="aaa"
                  style="color:yellow"
                >{{ manageDetailShowList.amount }}</span> 元</label>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="ydbh">
                支付方式:
                <label
                  v-if="manageDetailShowList.paymentMethod == '1'"
                >预付</label>
                <label
                  v-else-if="manageDetailShowList.paymentMethod == '2'"
                >到付</label>

              </div>
            </el-col>
            <el-col :span="6">
              <div class="ydbh">
                付款状态:
                <label
                  v-if="manageDetailShowList.paymentStatus == '1'"
                >未付</label>
                <label
                  v-else-if="manageDetailShowList.pickupType == '2'"
                >已付</label>

              </div>
            </el-col>

          </el-scrollbar>
        </el-collapse-item>
      </el-collapse>

      <el-collapse
        v-model="activeNames"
        class="customer-table-box"
        style="margin-top: 20px; margin-bottom: 40px"
      >
        <el-collapse-item name="3">
          <template slot="title">
            <div class="collapse-detail">货品信息</div>
          </template>
          <div style="box-sizing: border-box">
            <el-table
              :data="propTableData.col"
              style="width: 100%"
              stripe
              :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
            >
              <div
                v-show="!propTableData.col || propTableData.col.length <= 0"
                slot="empty"
              >
                <img
                  src="@/icons/pic-kong.png"
                  alt="img"
                  style="margin-top: 20px; width: 25%; height: 25%"
                />
                <p style="margin-top: -10px; padding-bottom: 10px">
                  这里空空如也
                </p>
              </div>
              <el-table-column
                label="序号"
                type="index"
                align="left"
                width="60"
              />
              <el-table-column label="货品名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.name || '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="货品类型">
                <template slot-scope="scope">
                  <span>{{
                    scope.row.goodsType === null
                      ? '--'
                      : scope.row.goodsType.name
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="重量（千克）">
                <template slot-scope="scope">
                  <span>{{ scope.row.totalWeight || '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="体积（立方）">
                <template slot-scope="scope">
                  <span>{{ scope.row.totalVolume || '--' }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <waybillMapsDialog
      ref="wayBillMaps"
      :title-info="titleInfo"
      :form-base="formData"
    />
  </div>
</template>
<script>
import waybillMapsDialog from './components/show-order-maps.vue'
import { orderDetail } from '@/api/order'
export default {
  components: {
    waybillMapsDialog
  },
  data() {
    return {
      logisticsInfo: [], // 运输流信息
      formData: {
        startLat: '',
        startLng: '',
        endLat: '',
        endLng: ''
      },
      wayId: '',
      orderId: '',
      titleInfo: {
        pageTitle: '',
        text: ''
      },
      activeNames: ['1', '2', '3', '4', '5', '6', '7'],
      propTableData: {
        col: []
      },
      manageDetailShowList: {
        id: '',
        // orderId: '',
        ydId: '',
        createTime: '',
        status: '',
        estimatedArrivalTime: '',
        senderName: '',
        senderPhone: '',
        senderAddress: '',
        receiverName: '',
        receiverPhone: '',
        receiverAddress: '',
        senderProvince: '',
        senderCity: '',
        senderCounty: '',
        receiverProvince: '',
        receiverCity: '',
        receiverCounty: '',
        amount: '',
        paymentMethod: '',
        paymentStatus: '',
        // 取件信息
        agencyName: '',
        courierName: '',
        name: '',
        pickupType: '',
        zystatus: '',
        courierMobile: '',
        estimatedStartTime: '',
        actualEndTime: '',
        // 派送信息
        psagencyName: '',
        pscourierName: '',
        pszystatus: '',
        pscourierMobile: '',
        psestimatedStartTime: '',
        psactualEndTime: '',
        taskTransports: [],
        taskDispatch: {},
        taskPickup: {
          id: '',
          status: '',
          courier: {
            // 快递员电话
            mobile: '',
            // 所在网点
            agency: {
              name: ''
            }
          }

        }

      }
    }
  },

  created() {
    this.wayId = this.$route.query.id
    this.orderId = this.$route.query.orderId
    this.getList(this.wayId)
    // this.getUpdateList(this.newUpdateList)
    // this.getOrderLocusParams(this.orderId)
  },

  mounted() {
    this.$router.afterEach((to, form, next) => {
      this.$nextTick(() => {
        window.scrollTo(0, 0)
      })
    })
  },
  methods: {
    // 返回运单列表
    hadlleCancel() {
      history.go(-1)
    },
    // 获取运单详情
    async getList(wayId) {
      const { data: res } = await orderDetail(wayId)
      // this.manageDetailShowList.ydId = res.id
      this.manageDetailShowList = res
      console.log(res)
    }

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import './manager-detail.scss';
.aaa{
  font-size: 20px;
}
</style>

